import React, { ReactNode, CSSProperties } from "react";
import { Overlay } from "react-vant";

interface CustomOverlayProps {
  /** 是否显示遮罩层 */
  visible: boolean;
  /** 关闭时的回调函数 */
  onClose: () => void;
  /** 内容区域宽度，默认 200 */
  width?: number | string;
  /** 内容区域高度，默认 100 */
  height?: number | string;
  /** 自定义内容 */
  children?: ReactNode;
  /** 遮罩层样式覆盖 */
  overlayStyle?: CSSProperties;
  /** 内容区域样式覆盖 */
  contentStyle?: CSSProperties;
  /** 点击内容区域是否关闭，默认 false */
  closeOnClickContent?: boolean;
}

const CustomOverlay: React.FC<CustomOverlayProps> = ({
  visible,
  onClose,
  width = 200,
  children,
  overlayStyle = {},
  contentStyle = {},
  closeOnClickContent = false,
}) => {
  const defaultOverlayStyle: CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    ...overlayStyle,
  };

  const defaultContentStyle: CSSProperties = {
    width,
    backgroundColor: "#fff",
    borderRadius: 8,
    padding: 16,
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
    ...contentStyle,
  };

  const handleContentClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (closeOnClickContent) {
      onClose();
    }
  };

  return (
    <Overlay visible={visible} onClick={onClose} style={defaultOverlayStyle}>
      <div style={defaultContentStyle} onClick={handleContentClick}>
        {children}
      </div>
    </Overlay>
  );
};

export default CustomOverlay;
